<template>
    <div class="dept-manage">
        <div class="query-form">
            <el-form ref="deptFormRef" inline :model="deptSearch">
                <el-form-item label="请输入部门名称:" prop="deptName">
                    <el-input v-model="deptSearch.deptName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDeptList" type="primary">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button @click="add()" type="primary" v-HasPermission="'dept-create'">创建</el-button>
            </div>
            <!-- TODO-需要修改row-key -->
            <el-table row-key="id" :data="tableData.data" style="width:100%;">
                <el-table-column type="selection" width="55" />
                <el-table-column v-for="item in tableData.columns" :key="item.prop" :prop="item.prop"
                    :label="item.label" :width="item.width">
                    <template #default="scope" v-if="item.render">
                        <span>{{item.render ? item.render(scope.row,scope.column) : ''}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button v-HasPermission="'dept-edit'" @click="edit(scope.row)">编辑</el-button>
                        <el-button v-HasPermission="'dept-delete'" type="danger" @click="singleRemove(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 编辑与新增 TO-DO -->
        <dept-form-dialog :parentId="formData.parentId" :type="action" :deptFormData="formData.deptFormData"
            :dept="(tableData.data as unknown[])" :show="show" :title="formData.title"
            :menu="tableData.data as unknown[]" @close="close" @submit="submit">
        </dept-form-dialog>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance } from "element-plus"
import { Columns, Page } from "@/interface/common"
import { DeptSearchParams, DeptParams } from "@/interface/dept"
import { MenuRow } from "@/interface/menu"
import deptFormDialog from "./components/deptForm.vue"
import useCurrentInstance from "@/hook/useCurrentInstance"
import utils from "@/utils/utils.js"
import { deptCreate, deptDelete, deptEdit, deptList } from "@/api/dept"

onMounted(() => {
    getDeptList()
})

// 查询条件
const deptFormRef = ref<FormInstance>()
const deptSearch = reactive<DeptSearchParams>({
    deptName: ''
})
const reset = () => {
    deptFormRef!.value?.resetFields()
}

// 列表
const tableData = reactive<Columns>({
    data: [],
    columns: [
        {
            label: "部门名称",
            prop: "deptName",
            align: "center",
            width: 180
        },
        {
            label: '负责人',
            prop: 'userName'
        },
        {
            label: '更新时间',
            prop: 'updatedAt',
            render: (row, column) => {
                return utils.formateDate(new Date(row.updatedAt))
            }
        },
        {
            label: '创建时间',
            prop: 'createdAt',
            render: (row, column) => {
                return utils.formateDate(new Date(row.createdAt))
            }
        }
    ],
    page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
    }
})
// 获取列表数据
const getDeptList = async () => {
    try {
        const list = await deptList({ deptName: deptSearch.deptName, page: tableData.page as Page })
        tableData.data = list
    } catch (error) {
        console.error(error)
    }
}

// 编辑与新增 TO-DO
const show = ref(false)
// 判断是编辑还是新增
const action = ref('create')
const formData = reactive({
    title: '创建菜单',
    deptFormData: {},
    parentId: [] as string[]
})
// 创建
const add = () => {
    formData.title = "创建部门"
    action.value = 'create'
    show.value = true
}
// 编辑
const edit = (row) => {
    console.log("数据", row)
    formData.title = "部门编辑"
    action.value = 'edit'
    console.log(`${row.userId}/${row.userName}/${row.userEmail}`)
    formData.deptFormData = Object.assign({}, row, { user: `${row.userId}/${row.userName}/${row.userEmail}` })
    show.value = true

}
// 删除
const singleRemove = async (id: number) => {
    console.log("删除")
    await deptDelete(id)
    that.$message.success("部门删除成功")
    getDeptList()
}
const { globalProperties: that } = useCurrentInstance()
const submit = async (data: DeptParams) => {
    if (action.value === 'create') {
        await deptCreate(data)
        that.$message.success("部门创建成功")
        getDeptList()
        close()
        return
    }
    await deptEdit(data)
    that.$message.success("部门编辑成功")
    getDeptList()
    close()
}
const close = () => {
    show.value = false
    action.value = "create"
}
</script>
<style lang='scss' scoped>
.dept-manage {
    width: 100%;
}
</style>